<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="global.css" type="text/css">
</head>
<body>
    <!--元素选择器，类选择器，ID选择器-->
    <h4>元素选择器</h4>
    <p class="class">类选择器</p>
    <p id="id">ID选择器</p>

    <!--类选择器是最常见的-->
    <p class="purple">我希望这段是紫色的</p>
    <p class="orange">我希望这段是橙色的</p>
    <p class="yellow">我希望这段是黄色的</p>

    <!--不同元素选择器也可以共享同一个类选择器的样式-->
    <div class="red">div类选择器</div>
    <nav class="red">nav类选择器</nav>
    <footer class="red">footer类选择器</footer>

    <!--层级关系-->
    <div class="parent">
        <div class="child">父级中的子级可区别于同类的其他元素</div>
    </div>
    <div class="child">同名的其他元素</div>

    <!--在同一个元素上分配多个类-->
    <div class="violet text-lg text-center">复杂的样式</div>
</body>
</html>